<html>
<head>
    <title>game select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="Stylesheet" href="../css/game-select.css"/>
    <link type="text/css" rel="Stylesheet" href="../css/game01.css"/>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
</head>
<body>
<div id="wrap">
    <script type="text/javascript">
        //        var questions = {
        //            imgSrc: '../images/ca_ngu.png',
        //            question: 'Chị Lan cần bổ sung lượng đủ là Axit Folic 600mcg/ 1 ngày. Bạn hãy chọn 1 thực phẩm chứa nhiều Axit Folic'
        //        }
    </script>
    <div id="game-0">
        <div id="logo">
            <img src="../images/image_0014_TNT.png">
        </div>

        <div id="game-content">

            <div class="screen01">
                <div class="image-mother">
                    <img src="../images/image_0019_Shape-4.png">
                </div>
                <div id="title-decript">HÃY CHỌN THỰC ĐƠN<br>TỐT NHẤT<br>CHO MẸ VÀ BÉ</div>
                <a href="#">
                    <div id="button-start"></div>
                </a>

                <script type="text/javascript">
                    $(document).ready(function () {
                        $("#button-start", ".screen01").click(function () {
                            $('.screen01').hide();
                            $('.screen02').show();
                        });
                    })
                </script>
            </div>

            <div class="screen02" style="display: none;">
                <div class="image-mother">
                    <img src="../images/image_0019_Shape-4.png">
                </div>
                <div id="title-decript1">LUẬT CHƠI:<br>HÃY CHỌN 1 CÂU<br>TRẢ LỜI ĐÚNG<br>CHO MỖI CÂU HỎI</div>
                <a href="#">
                    <div id="button-start1"></div>
                </a>

                <script type="text/javascript">
                    $(document).ready(function () {
                        $("#button-start1", ".screen02").click(function () {
                            $('.screen02').hide();
                            $('.screen03').show();
                        });
                    })
                </script>
            </div>

            <div class="screen03" style="display: none;">
                <div id="title-screen-3">3 tháng đầu thai kỳ</div>
                <div class="image-mother-screen-03_2_1">
                    <img src="../images/image_0015_Shape-6.png">
                </div>
                <div id="title-decript2_1">Chị Lan mang thai được 12 tuần, chiều cao 153cm, nặng 47 ký. Chị cần bổ sung
                    thêm nguồn dinh dưỡng dồi dào, để hỗ trợ sự phát triển của thai nhi cũng như tăng cường sức khỏe cho
                    thai phụ.<br><br>

                    Chị Lan cần bổ sung đầy đủ các dưỡng chất: axit folic, sắt, i-ốt, Vitamin B12. Bạn hãy chọn cho chị
                    loại thực phẩm có chứa nhiều nhất các dưỡng chất đã được nêu.
                </div>
                <a href="#">
                    <div class="button-continue"></div>
                </a>

                <script type="text/javascript">
                    $(document).ready(function () {

                    });
                </script>
            </div>

            <div class="screen03_1" style="display: none;">

                <script type="text/javascript">
                    count = 0;
                    var step = 0;
                    var sentenceStep = 0;
                    var currentPeople = people[step];
                    var canSelect = true;
                    var actionContinueButton = "continue";
                    var reSult;
                    function questionLoad(_currentPeople, _sentenceStep) {

                        $(".button-continue", ".screen03_1").hide();
                        $(".question").remove();
                        var question_list = $(".screen03_1");
                        question_list.append('' +
                                '<div class="question">' +
                                '<div id="title-screen-03_1_I">' + _currentPeople[_sentenceStep].question + '</div>' +
                                '<ul>' +
                                '<li><a href="#"><div class="food-item"><img src="'+ pathGame01 + _currentPeople[_sentenceStep].imgsrc1 + '"><div class="volume">' +_currentPeople[_sentenceStep].volume1 + '</div></div></a></li>' +
                                '<li><a href="#"><div class="food-item"><img src="'+ pathGame01 + _currentPeople[_sentenceStep].imgsrc2 + '"><div class="volume">' +_currentPeople[_sentenceStep].volume2 + '</div></div></a></li>' +
                                '<li><a href="#"><div class="food-item"><img src="'+ pathGame01 + _currentPeople[_sentenceStep].imgsrc3 + '"><div class="volume">' +_currentPeople[_sentenceStep].volume3 + '</div></div></a></li>' +
                                '</ul>' +
                                '</div>'
                        );
                        reSult = _currentPeople[_sentenceStep].answer;
//                        $(".title-screen-03_1_I").css('display', 'none');
//                        question_list.append('<a href="#"><div class="button-continue" style="display: none;"></div></a>');

                        $(".food-item", ".question").click(function () {
                            if (canSelect == true) {
                                $(".food-item", ".question").removeClass("opacity");
                                $(this).addClass("opacity");
                                $(".button-continue", ".screen03_1").show();
                            }
                        });
                    }

                    $(document).ready(function(){
                        $(".button-continue", ".screen03").click(function () {
                            count = 0;
                            canSelect = true;
                            actionContinueButton = "continue";
                            sentenceStep = 0;
                            currentPeople = people[step];
                            $('.screen03').hide();
                            $('.screen03_1').show();
                            questionLoad(currentPeople, sentenceStep);
//                            $("#title-screen-03_1_I").css('display', 'none');
                            $("#title-screen-03_1_I_result").hide();
                        });

//                        questionLoad(currentPeople, sentenceStep);

                        $(".button-continue, .button-question-continue, .button-people-result", ".screen03_1").click(function () {
                            if (actionContinueButton == 'continue') {
                                $(".food-item").each(function (index, _item) {
                                    var item = $(_item);
                                    if (item.hasClass("opacity")) {
                                        if (reSult == index + 1) {
                                            count++;
                                        }
                                        item.removeClass("opacity");
                                    }
                                });

                                $(".food-item").parent().css('cursor', 'default');

                                $(".food-item").each(function (index, _item) {
                                    var item = $(_item);
                                    if (index != reSult - 1) {
                                        item.addClass("opacity");
                                    }
                                    $(".volume", item).show();
                                });
                                $("#title-screen-03_1_I").hide();
                                $("#title-screen-03_1_I_result").show();
                                canSelect = false;
                                actionContinueButton = "newQuestion";
                                $(".button-question-continue", ".screen03_1").show();
                                $(".button-continue", ".screen03_1").hide();
                                if(sentenceStep == 3){
                                    $(".button-people-result", ".screen03_1").show();
                                    $(".button-question-continue", ".screen03_1").hide();
                                    $(".button-continue", ".screen03_1").hide();

                                }
                            }
                            else {
                                if (actionContinueButton == 'newQuestion') {
                                    if(sentenceStep < 3)
                                    {
                                        sentenceStep++;
                                        questionLoad(currentPeople, sentenceStep);
                                        $("#title-screen-03_1_I").show();
                                        $("#title-screen-03_1_I_result").hide();
                                        actionContinueButton = "continue";
                                        canSelect = true;

                                        $(".button-question-continue", ".screen03_1").hide();
                                        $(".button-people-result", ".screen03_1").hide();
//                                        $(".button-continue", ".screen03_1").show();

                                    }
                                    else{
//                                        alert(sentenceStep);
//                                        if(sentenceStep == 3){
//                                            $(".button-people-result", ".screen03_1").show();
//                                            $(".button-question-continue", ".screen03_1").hide();
//                                            $(".button-continue", ".screen03_1").hide();
//
//                                        }else{
                                            $('.screen03_1').hide();
                                            $('.screen07').show();
                                            if(count > 2){
                                                $(".screen07").append('<div id="title-notice" style="">chúc mừng<br>bạn đã đạt ' + count +' trên 4</div>');
                                            }
                                            else{
                                                $(".screen07").append('<div id="title-notice" style="">rất tiếc<br>bạn chỉ đạt ' + count +' trên 4</div>');
                                            }

//                                        }

                                    }
                                }
                            }

//                            $("#title-screen-03_1_I_result").css('display', 'block');
//                            $("#title-screen-03_1_I").css('display', 'none');
                        });

                        $("#button-end").click(function(){
                            $(".button-people-result", ".screen03_1").hide();
                            $("#title-notice", ".screen07").remove();
                            $("#title-invite", ".screen07").show();
                            $("#button-end").hide();
                            setTimeout(function(){
                                step++;
                                if(step == 4){
//                                    window.location = '../game-select.html';
                                    count = 0;
                                    canSelect = true;
                                    step = 0;
                                    actionContinueButton = "continue";
                                    sentenceStep = 0;
                                    currentPeople = people[step];
                                    $(".screen01").show();
                                    $(".screen02").hide();
                                    $(".screen03").hide();
                                    $(".screen03_1").hide();
                                    $("#title-invite", ".screen07").hide();
                                    $("#button-end", ".screen07").show();
                                    $(".screen07").hide();
                                    $(".image-mother-screen-03_2_1, #title-screen-3, #title-decript2_1", ".screen03").remove();
                                    $(".screen03").append('<div id="title-screen-3">' + people[step][currentPeople.length - 1].phase + '</div><div class="image-mother-screen-03_2_1"><img src="' + people[step][currentPeople.length - 1].imgPeople + '"></div>' +
                                            '<div id="title-decript2_1">' + people[step][currentPeople.length - 1].description + '</div>');
                                }
                                else{
                                    $(".button-question-continue", ".screen03_1").hide();
                                    $(".button-people-result", ".screen03_1").hide();
                                    $(".button-continue", ".screen03_1").show();
                                    $("#title-invite", ".screen07").hide();
                                    $(".screen07").css('display', 'none');
                                    $(".screen03").css('display', 'block');
                                    $("#button-end").css('display', 'block');
                                    $(".image-mother-screen-03_2_1, #title-screen-3, #title-decript2_1", ".screen03").remove();
                                    $(".screen03").append('<div id="title-screen-3">' + people[step][currentPeople.length - 1].phase + '</div><div class="image-mother-screen-03_2_1"><img src="' + people[step][currentPeople.length - 1].imgPeople + '"></div>' +
                                            '<div id="title-decript2_1">' + people[step][currentPeople.length - 1].description + '</div>');
                                }
                            }, 1000);
                        });
                    });
                </script>
                <div id="title-screen-03_1_I_result" style="text-align: center; display: none;">đáp án đúng là</div>
                <a href="#">
                    <div class="button-continue" style="display: none;"></div>
                    <div class="button-question-continue" style="display: none;"></div>
                    <div class="button-people-result" style="display: none;"></div>
                </a>
            </div>

            <div class="screen07" style="display: none;">
                <!--<script type="text/javascript">-->
                    <!--$(document).ready(function(){-->
                        <!--$(".screen07").append('<div id="title-notice" style="">chúc mừng<br>bạn đã đạt ' + count +' trên 4</div>');-->
                    <!--});-->

                <!--</script>-->

                <div id="title-invite" style="display: none;">mời người chơi<br>tiếp theo</div>
                <div style="position: absolute; top: 35px; right: 50px;">
                    <img src="../images/trend__0000_chiNgoc.png">
                </div>

                <a href="#">
                    <div id="button-end"></div>
                </a>
            </div>
        </div>

        <div id="footer-banner">
            <a href="../index.html"><img class="home-icon" src="../images/home_button.png"></a>
            <a href="#"><img class="abbott-icon" src="../images/image_0001_Abbott-logo.png"></a>
            <img src="../images/image_0002_Shape-8.png">
        </div>
    </div>
</div>
</body>
</html>